<template>
    <h2>用户投资页面</h2>
    <table class="table table-bordered">
        <tr>
            <td>项目名称:</td>
            <td>
                {{ data.I_Name }}
            </td>
        </tr>
        <tr>
            <td>投资总金额:</td>
            <td>
                <!-- <input type="text" class="form-control" v-model="data.I_Budget" readonly> -->
                {{ data.I_Budget }}
            </td>
        </tr>
        <tr>
            <td>已投金额:</td>
            <td>
                {{ data.I_Receive }}
            </td>
        </tr>
        <tr>
            <td>剩余金额:</td>
            <td>
                {{ data.I_Residue }}
            </td>
        </tr>
        <tr>
            <td>投资金额</td>
            <td>
                <input type="text" class="form-control" v-model="data.UI_Money" @change="ShowMaxMoney" />
            </td>
        </tr>
        <tr>
            <td>预期最高收益</td>
            <td>
                <input type="text" class="form-control" v-model="data.UI_MaxMoney" />
            </td>
        </tr>
        <tr>
            <td colspan="2" style="text-align:center;">
                <input type="button" class="btn btn-primary" value="提交" @click="SaveData" />
            </td>
        </tr>
    </table>
</template>


<script setup lang="ts">
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router'
import axios from 'axios';
import { useUserStore } from '../../store/index.ts'

const data = ref({
    I_Name: '',
    I_Budget: '',
    I_Receive: '',
    I_Residue: '',
    UI_Money: '',
    UI_MaxMoney: ''
})

const Router = useRouter();

//路由实例
const route = useRoute();
//获取地址栏路由编号
const Iid = route.params.Iid;

//实例仓库
const UserStore = useUserStore();


//生命周期钩子
onMounted(() => {
    axios({
        method: "get",
        url: "https://localhost:44305/api/Invests/SearchInvestNumber",
        params: {
            Iid: Iid
        }
    })
        .then(res => {
            console.log(res.data);
            //依次赋值
            data.value.I_Name = res.data.I_Name;
            data.value.I_Budget = res.data.I_Budget;
            data.value.I_Receive = res.data.I_Receive;
            data.value.I_Residue = res.data.I_Residue;
        })

})


//计算预期最高收益
const ShowMaxMoney = () => {
    data.value.UI_MaxMoney = (Number(data.value.UI_Money) * 0.02).toFixed(2) + "CNY";
}

//完成用户投资
const SaveData = () => {
    if (!data.value.UI_Money) {
        alert('投资金额不能为空');
        return;
    }

    //判断区间值
    if (Number(data.value.UI_Money) < 0 || Number(data.value.UI_Money) > 100000) {
        alert('投资金额需大于0且小于1亿元');
        return;
    }

    //判断投资金额是否大于剩余额度
    if (data.value.UI_Money > data.value.I_Residue) {
        alert('投资金额不能大于剩余额度');
        return;
    }

    axios({
        method: "post",
        url: "https://localhost:44305/api/Invests/AddUserInvestInfo",
        data: {
            U_Id: UserStore.UserLoginId,
            I_Id: Iid,
            UI_Money: data.value.UI_Money,
        }
    })
        .then(function (res) {
            if (res.data > 0) {
                alert('用户投资成功');
                Router.push("UserShowInvestPage")
            }
            else {
                alert('用户投资失败');
            }
        })
}

</script>